<template>
  <div id="main-view">
    <van-search v-model="searchContent" shape="round" background="#FA6408" placeholder="请输入搜索关键词" @search="onSearch">
      <template #left>
        <van-icon name="location" color="#fff" style="margin-right: 11px;" size="18px"></van-icon>
      </template>
    </van-search>
    <van-tabs v-model="active" color="white" background="#FA6408" :sticky="tabSticky" title-inactive-color="white" title-active-color="white">
      <van-tab title="推荐">
        <recommend-view @updateActive="updateActive"></recommend-view>
      </van-tab>
      <van-tab title="猫咪">
        <cats-view @updateActive="updateActive"></cats-view>
      </van-tab>
      <van-tab title="狗狗">
        <dogs-view></dogs-view>
      </van-tab>
      <van-tab title="周边">
        <goods-view></goods-view>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { Search as VanSearch, Icon as VanIcon, Tab as VanTab, Tabs as VanTabs } from 'vant';

import RecommendView from '@/views/common-views/main-views/RecommendView.vue';
import CatsView from '@/views/common-views/main-views/CatsView.vue';
import DogsView from '@/views/common-views/main-views/DogsView.vue';
import GoodsView from '@/views/common-views/main-views/GoodsView.vue';

export default {
  name: "MainView",
  components: {
    VanSearch,
    VanIcon,
    VanTab,
    VanTabs,
    RecommendView,
    CatsView,
    DogsView,
    GoodsView
  },
  data() {
    return {
      // 搜索内容
      searchContent: '',
      // 标签激活状态
      active: 0,
      tabSticky: true
    };
  },
  methods: {
    updateActive(page_number) {
      this.active = page_number;
    },
    onSearch(value) {
      this.$router.push({ name: 'SearchView', query: { keyword: value } });
    }
  }
};
</script>

<style scoped></style>
